<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="党组织" prop="deptId" style="width: 100%;">
            <el-tree-select
              v-model="queryParams.deptId"
              :data="deptOptions"
              :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
              value-key="deptId"
              placeholder="请选择党组织"
              check-strictly
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="padding-left: 12px; padding-right: 12px;">
            <el-form-item label="年份" prop="year" style="width: 100%;">
                <el-date-picker clearable
                    v-model="queryParams.year"
                    type="year"
                    value-format="YYYY"
                    placeholder="请选择年份"
                    style="width: 100%;">
                </el-date-picker>
            </el-form-item>
        </el-col>
        <el-col :span="8" style="padding-left: 12px; padding-right: 12px;">
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button type="danger" icon="Search" @click="handleQuery">查询</el-button>
        </el-col>
      </el-row>
    </el-form>

    <div style="display: flex;justify-content: space-between;align-items: center;">
      <div style="width: 31%;">
        <div style="width: 100%;">
          <div>
            <div class="pie_tit">
              开展情况
            </div>
            <div>
              <circle-pie-chart width="100%" :height="cirecleHeight" :circleTitle="circleTitle" :dataArray="dangOrgArr"/>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 100%;">
          <category-chart width="100%" :height="categoryHeight" :xDataArray="xBarData" :allDataArray="allBarData"/>
      </div>
    </div>

    <el-tabs v-model="activeName">
      <el-tab-pane label="本组织" name="first">
        <el-popover placement="right" effect="dark" :width="260" trigger="click" >
          <template #reference>
            <el-icon style="cursor: pointer;position: absolute;top: 9px;left: 114px; z-index: 1999;" size="20px"><Warning /></el-icon>
          </template>
          <div style="padding: 5px;text-align: left;">
              党支部党员大会：每季度一次；<br/>
              党课：每季度一次；<br/>
              支部委员会： 每月一次；<br/>
              党小组会： 每月一次；<br/>
              其他会议：每年一次；
          </div>
        </el-popover>

        <el-table :data="meetingInfoList" border style="width: 100%;" :span-method="mergeSameRows">
          <el-table-column label="会议类型" align="center" prop="typeName"/>
          <el-table-column label="1月" align="center" width="119px" prop="m1count">
            <template #default="scope">
              <div v-if="scope.row.spanCols>1">
                <a :class="[scope.row.m1count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="scope.row.spanCols">
                  {{ scope.row.m1count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else>
                <a :class="[scope.row.m1count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="1">
                  {{ scope.row.m1count>0 ? '已召开' : '--' }}
                </a>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="2月" align="center" width="119px" prop="m2count">
            <template #default="scope">
              <div v-if="scope.row.spanCols>1 && scope.row.spanCols<12">
                <a :class="[scope.row.m2count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="scope.row.spanCols">
                  {{ scope.row.m2count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else-if="scope.row.spanCols!==12">
                <a :class="[scope.row.m2count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="1">
                  {{ scope.row.m2count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column label="3月" align="center" width="119px" prop="m3count">
            <template #default="scope">
              <div v-if="scope.row.spanCols>1 && scope.row.spanCols<12">
                <a :class="[scope.row.m3count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="scope.row.spanCols">
                  {{ scope.row.m3count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else-if="scope.row.spanCols!==12">
                <a :class="[scope.row.m3count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="1">
                  {{ scope.row.m3count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column label="4月" align="center" width="119px" prop="m4count">
            <template #default="scope">
              <div v-if="scope.row.spanCols>1 && scope.row.spanCols<12">
                <a :class="[scope.row.m4count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="scope.row.spanCols">
                  {{ scope.row.m4count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else-if="scope.row.spanCols!==12">
                <a :class="[scope.row.m4count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="1">
                  {{ scope.row.m4count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column label="5月" align="center" width="119px" prop="m5count">
            <template #default="scope">
              <div v-if="scope.row.spanCols==1">
                <a :class="[scope.row.m5count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="1">
                  {{ scope.row.m5count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column label="6月" align="center" width="119px" prop="m6count">
            <template #default="scope">
              <div v-if="scope.row.spanCols==1">
                <a :class="[scope.row.m6count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="1">
                  {{ scope.row.m6count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column label="7月" align="center" width="119px" prop="m7count">
            <template #default="scope">
              <div v-if="scope.row.spanCols==1">
                <a :class="[scope.row.m7count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="1">
                  {{ scope.row.m7count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column label="8月" align="center" width="119px" prop="m8count">
            <template #default="scope">
              <div v-if="scope.row.spanCols==1">
                <a :class="[scope.row.m8count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="1">
                  {{ scope.row.m8count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column label="9月" align="center" width="119px" prop="m9count">
            <template #default="scope">
              <div v-if="scope.row.spanCols==1">
                <a :class="[scope.row.m9count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="1">
                  {{ scope.row.m9count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column label="10月" align="center" width="119px" prop="m10count">
            <template #default="scope">
              <div v-if="scope.row.spanCols==1">
                <a :class="[scope.row.m10count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="1">
                  {{ scope.row.m10count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column label="11月" align="center" width="119px" prop="m11count">
            <template #default="scope">
              <div v-if="scope.row.spanCols==1">
                <a :class="[scope.row.m11count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="1">
                  {{ scope.row.m11count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column label="12月" align="center" width="119px" prop="m12count">
            <template #default="scope">
              <div v-if="scope.row.spanCols==1">
                <a :class="[scope.row.m12count>0 ? 'table-a-black': 'table-a-red']" href="javascript:void(0);" :colspan="1">
                  {{ scope.row.m12count>0 ? '已召开' : '--' }}
                </a>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="MeetingInfo">
import router from "@/router";
import { meetingStat } from "@/api/partybuilding/MeetingInfo";
import { listOrg } from "@/api/partybuilding/Org";
import CirclePieChart from "../../dashboard/CirclePieChart.vue";
import CategoryChart from "../../dashboard/CategoryChart.vue";
const { proxy } = getCurrentInstance();
const { pb_meeting_type } = proxy.useDict("pb_meeting_type");
const meetingInfoList = ref([]);
const showSearch = ref(true);
const dateRange = ref([]);
const deptOptions = ref(undefined);
const activeName = ref('first');
const xBarData = ref([]);
const allBarData = ref([]);
const circleTitle = ref("开展情况");
const cirecleHeight = ref("275px");
const categoryHeight = ref("275px");
const dangOrgArr = ref([]);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deptId: null,
    year: new Date().getFullYear()+"",
  }
});
const { queryParams } = toRefs(data);
/** 查询会议信息列表 */
function getList() {
  dangOrgArr.value = [];
  meetingStat(queryParams.value).then(res => {
    let dataObj = res.data;
    let allMeetingArray =  dataObj.t1;
    let downLineArray =  dataObj.t2;
    let upLineArray = dataObj.t3;
    //获取开展会议饼状图数据
    let tmpPieArray = [];
    allMeetingArray.forEach(mtItem=>{
      tmpPieArray.push({ value: mtItem.total, name: mtItem.typeName });
    })
    dangOrgArr.value = tmpPieArray;
    xBarData.value = [];
    allBarData.value = [];
    let tmpDownLineObj = {
      name: "线下会议",
      barWidth:22,
      type: "bar",
      barGap:0,
      data: []
    };
    let tmpUpLineObj = {
      name: "直播会议",
      type: "bar",
      barWidth:22,
      data: []
    };
    let tmpDownList = [];
    let tmpUpList = [];
    //遍历会议类型
    pb_meeting_type.value.forEach(item => {
      xBarData.value.push(item.label);
      let isHave = false;
      //线下会议
      downLineArray.forEach(downItem => {
        if (downItem.typeCode == item.value) {
          isHave = true;
          tmpDownList.push({name: item.label, value: downItem.total});// 格式为：（会议类型：会议次数）
        }
      });
      if (!isHave){
        tmpDownList.push({name: item.label, value: 0});// 格式为：（会议类型：会议次数）
      }

      isHave = false;
      //直播会议
      upLineArray.forEach(upItem => {
        if (upItem.typeCode === item.value) {
          isHave = true;
          tmpUpList.push({name: item.label, value: upItem.total});// 格式为：（会议类型：会议次数）
        }
      });
      if (!isHave){
        tmpUpList.push({name: item.label, value: 0});// 格式为：（会议类型：会议次数）
      }

      /**
       * 党支部党员大会：每季度一次；
       * 党课：每季度一次；
       * 支部委员会： 每月一次；
       * 党小组会： 每月一次；
       * 其他会议：每年一次；
      */
      allMeetingArray.forEach(mtItem=>{
        if (mtItem.typeCode=='0' || mtItem.typeCode=='3'){
          // 每季度一次
          mtItem.spanCols = 3;
          //meetingInfoList.value.push(getJdData(mtItem));
        }else if (mtItem.typeCode=='1' || mtItem.typeCode=='2'){
          // 每月一次
          mtItem.spanCols = 1;
          //meetingInfoList.value.push(getMeetMonthData(mtItem));
        }else{
          // 每年一次
          mtItem.spanCols = 12;
          //meetingInfoList.value.push(getMeetYearData(mtItem));
        }
      })
    });
    //放入线下柱状图数组
    if (tmpDownList.length>0){
      tmpDownLineObj.data = tmpDownList;
    }
    allBarData.value.push(tmpDownLineObj);
    //放入线上柱状图数组
    if (tmpUpList.length>0){
      tmpUpLineObj.data = tmpUpList;
    }
    allBarData.value.push(tmpUpLineObj);
    //表格数据
    meetingInfoList.value = allMeetingArray;
  });
}

/**返回年度数据*/
function getMeetYearData(meetItem) {
  let tmpTableRecord = {};
  let spanDataArray = [];
  tmpTableRecord.meetTypeName = meetItem.typeName;
  tmpTableRecord.spanCols = 12;
  if (meetItem.m1count>0 || meetItem.m2count>0 || meetItem.m3count>0 
      || meetItem.m4count>0 || meetItem.m5count>0 || meetItem.m6count>0
      || meetItem.m7count>0 || meetItem.m8count>0 || meetItem.m9count>0
      || meetItem.m10count>0 || meetItem.m11count>0 || meetItem.m12count>0){
    spanDataArray.push({month:'1',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  return tmpTableRecord;
}

/**返回月度数据*/
function getMeetMonthData(meetItem) {
  let tmpTableRecord = {};
  let spanDataArray = [];
  tmpTableRecord.meetTypeName = meetItem.typeName;
  tmpTableRecord.spanCols = 1;
  if (meetItem.m1count>0){
    spanDataArray.push({month:'1',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  if (meetItem.m2count>0){
    spanDataArray.push({month:'2',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  if (meetItem.m3count>0){
    spanDataArray.push({month:'3',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  if (meetItem.m4count>0){
    spanDataArray.push({month:'4',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  if (meetItem.m5count>0){
    spanDataArray.push({month:'5',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  if (meetItem.m6count>0){
    spanDataArray.push({month:'6',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  if (meetItem.m7count>0){
    spanDataArray.push({month:'7',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  if (meetItem.m8count>0){
    spanDataArray.push({month:'8',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  if (meetItem.m9count>0){
    spanDataArray.push({month:'9',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  if (meetItem.m10count>0){
    spanDataArray.push({month:'10',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  if (meetItem.m11count>0){
    spanDataArray.push({month:'11',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  if (meetItem.m12count>0){
    spanDataArray.push({month:'12',state:true});
    tmpTableRecord.isHave = true;
  }else{
    tmpTableRecord.isHave = false;
  }
  return tmpTableRecord;
}

/**返回季度数据*/
function getJdData(meetItem) {
  let tmpTableRecord = {};
  let spanDataArray = [];
  tmpTableRecord.meetTypeName = meetItem.typeName;
  if (meetItem.m1count>0 || meetItem.m2count>0 || meetItem.m3count>0){
    spanDataArray.push({month:'1',state:true});
    tmpTableRecord.isHave = true;
    tmpTableRecord.spanCols = 3;
  }else{
    tmpTableRecord.isHave = false;
    tmpTableRecord.spanCols = 1;
  }

  if (meetItem.m4count>0 || meetItem.m5count>0 || meetItem.m6count>0){
    spanDataArray.push({month:'4',state:true});
    tmpTableRecord.isHave = true;
    tmpTableRecord.spanCols = 3;
  }else{
    tmpTableRecord.isHave = false;
    tmpTableRecord.spanCols = 1;
  }

  if (meetItem.m7count>0 || meetItem.m8count>0 || meetItem.m9count>0){
    spanDataArray.push({month:'7',state:true});
    tmpTableRecord.isHave = true;
    tmpTableRecord.spanCols = 3;
  }else{
    tmpTableRecord.isHave = false;
    tmpTableRecord.spanCols = 1;
  }

  if (meetItem.m10count>0 || meetItem.m11count>0 || meetItem.m12count>0){
    spanDataArray.push({month:'10',state:true});
    tmpTableRecord.isHave = true;
    tmpTableRecord.spanCols = 3;
  }else{
    tmpTableRecord.isHave = false;
    tmpTableRecord.spanCols = 1;
  }
  return tmpTableRecord;
}

const mergeSameRows = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex >0) {
    return { rowspan: 1, colspan: row.spanCols };
  }else{
    return { rowspan: 1, colspan: 1 };
  }
};

/** 查询部门下拉树结构 */
function getDeptTree() {
  listOrg().then(response => {
    deptOptions.value = proxy.handleTree(response.rows, "deptId");
    if (deptOptions.value!=null && deptOptions.value.length>0){
      queryParams.value.deptId = deptOptions.value[0].deptId;
    }
  });
};

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

function goMeeeting(){
  router.push({ path: "/work/MeetingList", query: { pageNum: 1 } });
}

getDeptTree();
setTimeout(() => {
  getList();
}, 100);

</script>
<style lang="scss" scoped>
.helpTop {
  position: absolute;
  background-color: rgb(255, 255, 255);
  height: 20px;
  top: 24px;
  left: 17px;
  cursor: pointer;
}
.pie_tit {
  margin-bottom: 20px;
  font-size: 16px;
  color: rgba(0, 0, 0, .85);
}
.pie_Percent
{
  padding-left: 20px;
  font-size: 14px;
  color: rgba(0, 0, 0, .65);
}
.pie_info
{
  padding-left: 10px;
  font-size: 14px;
  color: #999;
}
.table-a-red {
  color: #ff4d4f; display: block; text-align: center; width: 100%; height: 100%;
}
.table-a-black {
  color: rgba(0,0,0,.65); display: block; text-align: center; width: 100%; height: 100%;
}
</style>